/*
 * @Author: 
 * @Date: 2022-01-26 13:59:18
 * @LastEditors: lqj
 * @LastEditTime: 2022-02-11 15:38:25
 * @Description: ref使用
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types'

class Header extends Component {
  // 使用api形式绑定ref
  inputRef = React.createRef()

  enterCode = (e) => {
    const { code, target } = e
    if (code !== 'Enter' || target.value.trim() === '') return
    this.props.getValue(target.value)
    target.value = ''
    // 使用字符串形式绑定ref =》不推荐
    // console.log(this.refs.refString)
    // console.log(this.inputRef.current.value)
  }

  static propTypes = {
    getValue: PropTypes.func.isRequired
  }
  // 使用回调函数形式绑定ref =》不推荐
  refItem = (e) => {
    // console.log(e)
  }
  render() {
    return (
      <div className='todo-header'>
        {/* <input ref={this.inputRef} type="text" placeholder="1" />
        <input ref={c => this.refItem = c} type="text" placeholder="2" />
        <input ref='refString' type="text" placeholder="3" /> */}
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" onKeyUp={this.enterCode} />
      </div>
    );
  }
}

export default Header;
